<template>
	<view class="container">
		<view class="goods_unit" :style="{height:pic_h}" v-for="(item,index) in result" :key="index">
			<view class="goods_pic" :style="{height:pic_hh}">
				<image :style="{height:pic_hh}"  mode="aspectFill"  :src="url+item.img_url"></image>
			</view>
			
			<view class="goods_con" :style="{height:pic_h}">
				<view class="goods_name">{{item.goods_name}}</view>
				<block v-if="index==0">
					<view class="status" v-if="result[0].order_status==0">未支付</view>
					<view class="status" v-if="result[0].order_status==1">待发货</view>
					<view class="status" v-if="result[0].order_status==2">已发货</view>
					<view class="status" v-if="result[0].order_status==3">已完成</view>
					<view class="status" v-if="result[0].order_status==4">退货/售后</view>
				</block>
				
				<view class="tag">{{item.order_specs_name}}</view>
				<view class="goods_property">￥{{item.order_price}} × {{item.number}}</view>
			</view>
			<view class="price" :style="{height:pic_h}">￥{{item.order_price*item.number}}</view>
		</view>
		<view class="address" v-on:click="go_address" v-if="result[0].order_status==0">
			<view class="address_tips">重新选择地址</view>
		</view>
		<view class="address" v-on:click="go_address" v-if="address.length==0">
			<view class="none_address">还没有选择地址</view>
			<view class="address_tips">选择地址</view>
		</view>
		<block v-else>
			<view class="integral" v-if="result[0].address=='0'">
				<view class="title">配送信息</view>
				<view class="unit_">
					<view class="integral_name">物流公司：</view>
					<view class="integral_value">{{result[0].company}}</view>
				</view>
				<view class="unit_">
					<view class="integral_name">物流单号：</view>
					<view class="integral_value">{{result[0].waybill}}</view>
				</view>
				<view class="unit_">
					<view class="integral_name">收货地址：</view>
					<view class="integral_value">{{address[0].addr_name}}
				联系电话：{{address[0].addr_phone}}
				{{address[0].address}}</view>
				</view>
			</view>
			<view class="integral" v-else>
				<view class="title">配送信息</view>
				<view class="unit_">
					<view class="integral_name">物流公司：</view>
					<view class="integral_value">{{result[0].company}}</view>
				</view>
				<view class="unit_">
					<view class="integral_name">物流单号：</view>
					<view class="integral_value">{{result[0].waybill}}</view>
				</view>
				<view class="unit_">
					<view class="integral_name">收货地址：</view>
					<view class="integral_value">{{result[0].address}}</view>
				</view>
			</view>
		</block>
		
		
		<view class="integral" v-if="result[0].remark.length>0">
			<view class="title">备注</view>
			<view class="unit_">
				<view class="integral_value">{{result[0].remark}}</view>
			</view>
		</view>
		<view class="integral">
			<view class="title">商品总额</view>
			<view class="unit">
				<view class="integral_name">运费：</view>
				<view class="integral_value">￥0</view>
			</view>
			<view class="unit">
				<view class="integral_name">优惠：</view>
				<view class="integral_value">￥0</view>
			</view>
			<view class="unit">
				<view class="integral_name">实付款：</view>
				<view class="integral_value">￥{{result[0].order_money}}</view>
			</view>
		</view>
		<view class="integral">
			<view class="title">订单信息</view>
			<view class="unit_">
				<view class="integral_name">订单编号：</view>
				<view class="integral_value">{{result[0].order_num}}</view>
			</view>
			<view class="unit_">
				<view class="integral_name">下单时间：</view>
				<view class="integral_value">{{result[0].datetime}}</view>
			</view>
			<view class="unit_">
				<view class="integral_name">支付时间：</view>
				<view class="integral_value">{{result[0].paytime}}</view>
			</view>
		</view>
		<view class="lh"></view>
		<view class="foot">
			<view class="total"><text>共（{{number}}件）</text>合计：￥{{result[0].order_money}}</view>
<!--			<view class="pay" v-if="result[0].order_status==0" :id="result[0].order_id" v-on:click="pay_submit">马上支付</view>-->
			<view class="pay_b" v-if="result[0].order_status==0" :id="result[0].order_id" v-on:click="delete_submit">删除订单</view>
<!--			<view class="pay_b" v-if="result[0].order_status==1" :id="result[0].order_id" data-status="4" v-on:click="apply_return_submit">申请退货</view>-->
			<view class="pay" v-if="result[0].order_status==2" :id="result[0].order_id" data-status="3" v-on:click="change_status_submit">确认收货</view>
			<!-- <view class="pay" v-if="result[0].order_status==3" v-on:click="evaluate" :id="value[0].order_id">我要评价</view> -->
			<!-- <view class="pay" v-if="result[0].order_status==4">退货/售后</view> -->
		</view>
		<view class="mask" v-show="display==1" :style="{width:w,height:h}" v-on:click="close_dialog"></view>
		<view class="add" v-show="display==1">
			<view class="add_address">评价窗口</view>
			<view class='title'>
			  <view class='input_label'>评价内容</view>
				<view class="evaluate_">
					<block v-for="(item,index) in star" :key="index">
						<image :src="item.url" :data-check="item.check" :id="item.id" v-on:click="point"></image>
					</block>
				</view>
			</view>
			<view class='title'>
			  <view class='input_label'>评价内容</view>
			  <view class="input_content">
				  <textarea class='textarea' maxlength="100" placeholder='请输入评价内容,不能低于5个字' :value="text" data-name="text" @input="input_"></textarea>
				  <!-- <view class="number">{{number}}/{{total}}</view> -->
			  </view>
			</view>
			<view class='form_unit1'>
				<view class='form_label' style=''>上传商品图片</view>
				<view class='pic'>
				  <view class='pic_unit' 
				        :style='{height:width}' 
				        :id="item.order_evaluate_id" 
						:data-img='item.order_img' 
						v-if="num!=0" v-for="(item,key) in img" 
						:key='key' v-on:longpress='delete_img'>
					<image class='pic_unit_pic'  :style='{height:width}' mode="aspectFit" :src='url+item.order_img'></image>
				  </view>
					<view class='add_pic' :style='{height:width}'  v-on:click='upload_img' v-if="num!=3"><view>+</view></view>
				</view>
			</view>
			<view class="remark">
				<view class="line">长按图片，可选择删除图片</view>
			</view>
			<view class='button' :data-status="status" v-on:click='order_evaluate_submit'>发布评价</view>
		</view>
	</view>
</template>
<style>
	.pay_{width:96%;margin:10upx 2%;padding-bottom:20upx;background: #FFFFFF;border-radius: 10upx;}
	.pay_unit{width:96%;margin:10upx 2%;display: flex;justify-content: space-between;align-items: center;height: 80upx;}
	.pay_unit image{width:40upx;margin-right: 20upx;}
	.pay_name{width:80%;font-size:28upx;}
	/***********************/
	page{background: #F4F4F4;}
	.container{width:100%;}
	.order_num{background: #FFFFFF;width:96%;padding:30upx 2%;font-size: 28upx;font-weight: bold;}
	.order_num text{color: #E10000;padding-right: 10upx;}
	.integral{width:92%;padding:10upx 2%;margin:10upx 2%;background: #FFFFFF;}
	.title{width:100%;font-size:28upx;font-weight: bold;}
	.unit{width:100%;display: flex;justify-content: space-between;align-items: center;border-radius: 10upx;height: 55upx;}
	.unit_{width:100%;display: flex;justify-content: flex-start;align-items: center;border-radius: 10upx;height: 55upx;}
	
	.integral_name{font-size: 24upx;display: flex;justify-content: flex-start;align-items: center;}
	.integral_value{font-size: 24upx;color: #AAAAAA;}
	.goods_unit{width:96%;margin:10upx 2%;display: flex;justify-content: space-between;overflow: hidden;position:relative;
	   align-items: center;background: #FFFFFF;border-radius: 10upx;}
	.goods_pic{width:25%;margin-left:3%;overflow: hidden;}
	.goods_pic image{width:100%}
	.goods_con{width:45%;display: flex;flex-direction: column;justify-content: space-between;align-items:flex-start;}
	.goods_name{width:98%;padding:10upx 0 0 2%;font-size: 28upx;}
	.tag{background: #F4F4F4;padding:5upx 20upx;font-size:28upx;color: #AAAAAA;}
	.status{background: #3DE9C7;padding:5upx 20upx;font-size:28upx;color: #282828;border-radius:0 0 0 20upx;position: absolute;top:0;right: 0;}
	.goods_property{width:98%;padding:0 0 10upx 2%;font-size: 28upx;color: #f40601;}
	.price{width:13%;padding-right: 2%;text-align: center;font-size: 28upx;font-weight: bold;display: flex;align-items: flex-end;justify-content: center;}
	
	.address_unit{width:96%;margin:0 2% 20upx 2%;height: 160upx;background: #FFFFFF;flex-direction: column;
			border-radius: 10upx;overflow: hidden;display: flex;justify-content: flex-start;align-items: center;}
	.address_unit image{width: 80upx;height: 80upx;}
	
	.address_title image{width:30upx;height:30upx;}
	.address_con{width:80%;height: 160upx;display:flex;justify-content: space-between;align-items: flex-start;flex-direction: column;}
	.address_con view{padding:0 20upx;font-size:26upx;height: 50upx;line-height:50upx;}
	.address_con text{font-size:24upx;color: #AAAAAA;}
	
	.address{width:92%;padding:0 2%;margin:0 2%;border-radius: 10upx;overflow: hidden;background: #FFFFFF;
			display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.none_address{width:100%;text-align:center;font-size:28upx;line-height:80upx;}
	.address_tips{font-size: 28upx;margin:10upx 0 ;padding:8upx 30upx;border:1px solid #3DE9C7;border-radius:8upx;}
	.address image{width:40upx;height: 40upx;}
	.lh{height: 130upx;}
	.foot{width:100%;height: 120upx;background: #FFFFFF;position:fixed;bottom: 0;display: flex;justify-content: flex-end;align-items: center;}
	.total{height: 100upx;line-height: 100upx;font-size: 28upx;text-align: center;color: #282828;padding-right:20upx;}
	.total text{padding-right:15upx;font-size:24upx;color:#AAAAAA;}
	.pay{width:30%;height: 80upx;background-image: linear-gradient(#43eac9, #24c3a4);border-radius: 50upx;margin-right:30upx;
	     line-height: 80upx;font-size: 30upx;color: #FFFFFF;text-align: center;}
	.del{width:25%;height: 100upx;background: #9F9F9F;line-height: 100upx;font-size: 30upx;color:#FFFFFF;text-align: center;}
	.total_{height: 100upx;line-height: 50upx;font-size: 30upx;text-align: center;color: #FFFFFF;width:35%;}
	.modify{width:100%;line-height: 50upx;font-size:28upx;}
	.price_{width:100%;line-height: 50upx;font-size:28upx;text-decoration: line-through;}
	.pay_b{width:30%;height: 80upx;border-radius: 50upx;margin-right:30upx;border:1px solid #999999;
	     line-height: 80upx;font-size: 30upx;color: #999;text-align: center;}
	/************************************/
	.mask{z-index: 999;background: #000;opacity: 0.6;position: fixed;top:0;}
	
	.add_address{width:94%;padding:10rpx 3%;display: flex;justify-content:flex-start;align-items:center;color: #999999;
				 /* background-image: linear-gradient(#43eac9, #24c3a4); */border-radius:10upx 10upx 0 0;}
	.title{width:100%;padding:10rpx 0;display: flex;justify-content:space-between;background: #FFFFFF;}
	.input_label{width:25%;height:50rpx;line-height: 50rpx;font-size:26rpx;}
	.input_content{width:74.5%;display: flex;flex-direction: column;}
	.textarea{width:95.5%;border-radius: 10rpx;font-size: 24rpx;line-height: 30rpx;color: #333333;height:150rpx;border:1px solid #999999;padding: 10rpx 2%;z-index: 1;}
	
	.evaluate_{width:70%;display:flex;justify-content: flex-start;align-items: center;height: 60upx;}
	.evaluate_ image{width:45upx;height: 45upx;margin-right: 3%;}
	
	.add{position: fixed;bottom:0;z-index: 999999;width:100%;background: #FFFFFF;}
	.button{width:94%;margin:10rpx 3% 0 3%;left:0;background: #EF3D19;color:#ffffff;font-size: 30rpx;
	text-align: center;height:80upx;line-height: 80upx;border-radius: 10rpx;}
	/************************************/
	.form_unit1{width:96%;padding: 10upx 2%;font-size:28upx;display: flex;
				justify-content: flex-start;align-items: center;border-bottom:1px solid #F4F4F4;background: #FFFFFF;}
	.form_label{width:20%;}
	.form_con1{display: flex;justify-content: flex-start;align-items: center;}
	.photo_con{height:150upx;line-height: 150upx;width:150upx;text-align: center;font-size:45rpx;
	           font-weight: bold;  border:1rpx solid #999999; border-radius: 10rpx;color:#999999;overflow: hidden; }
	.photo_con_pic{height:150upx;width:150upx;}
	
	.pic{display: flex;justify-content:space-between;width:76%;padding:10rpx 2%;flex-wrap: wrap;}
	.add_pic{background: #CCCCCC;color: #666;font-size: 60rpx;width:31%;display: flex;align-items: center;margin:20rpx 0;text-align: center;justify-content: center;}
	
	.pic_unit{width:31%;margin:20rpx 0;}
	.pic_unit_pic{width:100%;border:1px solid #999999;}
	.remark{width:80%;padding:10upx 10%;height:60upx}
</style>
<script>
	export default {
		data() {
			return {
				result:[],
				address:[],
				pic_h:'',
				pic_hh:'',
				order_id:0,
				integral:0,
				total:0,
				number:0,
				submit_status:1,
				status:1,
				price:0,
				display:0,
				img:[],num:0,width:'',
				w:'',h:'',star_num:5,text:'',
				star:[{id:1,url:"../../static/images/star.png",check:0},
					  {id:2,url:"../../static/images/star.png",check:0},
					  {id:3,url:"../../static/images/star.png",check:0},
					  {id:4,url:"../../static/images/star.png",check:0},
					  {id:5,url:"../../static/images/star.png",check:0}],
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.pic_h  = w*0.96*0.3+"px";
			this.pic_hh = w*0.96*0.25+"px";
			this.order_id = e.order_id;
			this.w = w+"px";
			this.h = res.windowHeight+"px";
			this.width  = res.windowWidth * 70 / 100 * 31 / 100+"px";
			this.initialize();
		},
		onShow(){
			this.get_address();
		},
		methods: {
			go_address:function()
			{
				uni.navigateTo({url:"/pages/member/address?order_id="+this.order_id})
			},
			get_address:function()
			{
				var member_id  = uni.getStorageSync("member_id");
				var address_id = uni.getStorageSync("address_id");
				// var member_id = 169841;
				console.log(address_id);
				var that = this;
				uni.request({
					url: this.url+'/wechat_get_address', 
					data: {member_id:member_id,type:2,address_id:address_id,order_id:this.order_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						if(res.data.status==1)
						{
							that.address  = res.data.result;
						}
					}
				});
			},
			close_dialog:function()
			{
				this.display = 0;
			},
			pay_submit:function(e)
			{
				var id = e.currentTarget.id;
				var member_id = uni.getStorageSync("member_id");
				// uni.navigateTo({url:"/pages/mall/order?order_id="+id})
				//#ifdef APP-PLUS
				toMpWeixin({
					appId:'wxb7a354cd32681d5d',
					gid:'gh_87e8741e177a',
					path:'pages/mall/order?order_id='+id
				})
				//#endif
				//#ifdef MP-WEIXIN
				uni.redirectTo({url:"/pages/mall/order?order_id="+id})
				//#endif
				//#ifdef H5
				var ua = navigator.userAgent.toLocaleLowerCase();
				if(ua.match(/MicroMessenger/i) == 'micromessenger')
				{
				   var appid = 'wxb7a354cd32681d5d';
				   // window.location.href = 'https://zhangjie.jdmuguzhid.com/wap/order?order_id='+res.data.order_id;
				   // var redirect_uri = encodeURIComponent('https://zhangjie.jdmuguzhid.com/order?member_id='+member_id+'&order_id='+res.data.order_id);
				   // var redirect_uri = encodeURIComponent('https://zhangjie.jdmuguzhid.com/wap#/pages/mall/get_code');
				   var redirect_uri = encodeURIComponent('https://zhangjie.jdmuguzhid.com/order?member_id='+member_id+'&order_id='+id);
				   window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize"+"?appid="+appid+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
				}
				else
				{
					uni.redirectTo({url:"/pages/mall/order?order_id="+id})
				}
				//#endif
			},
			evaluate:function(e)
			{
				
				var that = this;
				this.order_id = e.currentTarget.id;
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: that.url+'/wechat_get_evaluate', 
					data: {member_id:member_id,order_id:this.order_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res);
						if(res.data.status==1)
						{
							uni.showToast({
								title:"已经评价过了",
								duration:2000
							})
						}
						else
						{
							that.display = 1;
						}
					}
				});
			},
			upload_img:function()
			{
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						// console.log(JSON.stringify(res.tempFilePaths[0]));
						that.img_url = res.tempFilePaths[0];
						// that.img.push(tmp);
						that.upload_file();
					}
				});
			},
			upload_file:function()
			{
				var member_id = uni.getStorageSync("member_id");
				var that = this;
				uni.showLoading({
					title:"上传中...",
					mask:true,
					success:(res)=>{
						uni.uploadFile({
							url:that.url+'/wechat_upload_img', 
							filePath:that.img_url,
							name:'file',
							formData:{'name':'evaluate_img',order_id:that.order_id,member_id:member_id},
							success:(res)=>{
								var result = JSON.parse(res.data);
								that.img = [];
								that.num = 0;
								for(var i=0;i<result.result.length;i++)
								{
									if(result.result[i].img!='0')
									{
										var tmp = {};
										tmp.order_evaluate_id = result.result[i].order_evaluate_id;
										tmp.order_id          = result.result[i].order_id;
										tmp.order_img         = result.result[i].img;
										that.img.push(tmp);
										that.order_evaluate_id = result.result[i].order_evaluate_id;
										that.num++;
									}
									
								}
								
								uni.hideLoading();
							}
						})
					}
				})
			},
			order_evaluate_submit:function()
			{
				var member_id = uni.getStorageSync("member_id");
				var that = this;
				if(that.text.length>5)
				{
					uni.request({
						url: this.url+'/wechat_update_order_evaluate', 
						data: {order_evaluate_id:that.order_evaluate_id,order_id:that.order_id,member_id:member_id,text:that.text,number:that.star_num},
						header: {'Content-Type': 'application/json'},
						success: (re) => {
							if(re.data.status==1)
							{
								that.display = 0;
								that.text    = '';
								that.order_evaluate_id = 0;
								that.star_num = 5;
								uni.showToast({
									title:'评价成功！',
									duration:2000
								})
							}
						}
					});
				}
				else
				{
					uni.showToast({
						title:'内容不能为空',
						duration:2000
					})
				}
			},
			change_status_submit:function(e)
			{
				// console.log(e.currentTarget);return;
				var id     = e.currentTarget.id;
				var status = e.currentTarget.dataset.status;
				var that = this;
				uni.showModal({
					title:"确认收货",
					content:"点击确认收货",
					success: (res) => {
						if(res.confirm)
						{
							uni.request({
								url: that.url+'/wechat_update_goods_order_status', 
								data: {status:status,id:id},
								header: {'Content-Type': 'application/json'},
								success: (res) => {
									if(res.data.status==1)
									{
										uni.showToast({
											title:"操作成功！",
											duration:3000,
											success() {
												uni.redirectTo({
													url:"../member/order?status=3"
												})
											}})
									}
								}
							});
						}
					}
				})
			},
			point:function(e)
			{
				var check = e.currentTarget.dataset.check;
				var id    = e.currentTarget.id;
				this.star_num = parseInt(id);
				for(var i=0;i<this.star_num;i++)
				{
					this.star[i].url = "../../static/images/star.png";
				}
				for(var i=this.star_num;i<5;i++)
				{
					this.star[i].url = "../../static/images/empty_.png";
				}
			},
			delete_img:function(e)
			{
				var order_id = e.currentTarget.id;
				var img = e.currentTarget.dataset.img;
				var that = this;
				uni.showModal({
					title:'操作提示',
					content:"确认要删除该图片？",
					success:function(res)
					{
						if(res.confirm)
						{
							uni.request({
								url: that.url+'/wechat_delete_order_evaluate_img', 
								data: {order_evaluate_id:order_id,img:img},
								header: {'Content-Type': 'application/json'},
								success: (re) => {
									if(re.data.status==1)
									{
										for(var i=0;i<that.img.length;i++)
										{
											if(that.img[i].order_img==img)
											{
												that.img.splice(i,1);
												that.num--;
											}
										}
										uni.showToast({
											title:"操作成功",
											duration:2000
										})
									}
								}
							});
						}
					}
				})
				
			},
			delete_submit:function(e)
			{
				var id = e.currentTarget.id;
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				if(this.submit_status==1)
				{
					uni.showModal({
						title:"操作提醒",
						content:"确认要删除该笔订单",
						success:function(res)
						{
							if(res.confirm)
							{
								that.submit_status = 0;
								uni.request({
									url: that.url+'/wechat_delete_order', 
									data: {member_id:member_id,id:id},
									header: {'Content-Type': 'application/json'},
									success: (res) => {
										if(res.data.status==1)
										{
											uni.showToast({
												title:"操作成功",
												duration:2000
											})
											uni.redirectTo({
												url:"./member/order?status=0"
											})
										}
									}
								});
							}
						}
					})
					
				}
			},
			pay:function(e)
			{
				var id = e.currentTarget.id;
				console.log(id);
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="text")
				{
					this.text   = e.detail.value;
				}
			},
			initialize:function()
			{
				// uni.requestSubscribeMessage({
				// 	tmplIds: ['InK-z2h-Nncf9MnmSCvM8PSZsEXDONjTX3cLz4HLseM',//订单支付提醒
				// 			  'mkP9bar4566G3uawjVlaiG4jwukCyQfTl1JPxIR-pKI',//签到提醒
				//               'wG0Vy3NOX8s0PmpyDn4BjPDE37oSe_A7yHUV5aiDeok']//优惠活动通知
				// })
				var member_id = uni.getStorageSync("member_id");
				// var member_id = 169841;
				var that = this;
				uni.request({
					url: that.url+'/wechat_get_order', 
					data: {id:this.order_id,member_id:member_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res.data);
						that.result = res.data.result;
						that.total  = that.result[0].order_money;
						for(var i=0;i<that.result.length;i++)
						{
							that.number += that.result[i].number;
						}						
					}
				});
			}
		}
	}
</script>


